<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<title>个人中心</title>

	</head>
	<body>
		<jsp:include page="/incloud/header.jsp" />

		<div class="d-flex align-items-stretch">
			<!-- Sidebar Navigation-->
			<jsp:include page="/incloud/sidebar.jsp" />
			<!-- Sidebar Navigation end-->
			<div class="page-content">
				<div class="page-header">
					<div class="container-fluid">
						<h2 class="h5 no-margin-bottom">个人中心</h2>
					</div>
				</div>
				<section class="no-padding-bottom">
					<!-- Form Elements -->
					<div class="col-lg-12">
						<div class="block">
							<div class="title"><strong>我的头像</strong></div>
							<div class="avatar"><img name="pic" src="${user.pic}" id="pic" alt="加载中..." style="width: 150px;height: 150px"
								 class="img-thumbnail rounded-circle"></div>
							<div style="margin-top: 15px" class="text-left">
								<!-- 真正的文件上传表单 -->
								<input name="pic" type="file" id="picFile" style="display: none" />
							</div>
							<div class="title">
								<br>
								<p class="h5"><strong>关注数：</strong><span>&nbsp;</span><span>&nbsp;</span><span>${count}</span></p>
								<br>
								<p class="h5"><strong>被看数：</strong><span>&nbsp;</span><span>&nbsp;</span><span>${user.look}</span></p>
								<br>
							</div>
							<div class="title"><strong>我的数据</strong></div>
							<div class="block-body">
								<form class="form-horizontal" action="/internal/update">
									<div class="form-group row">
										<label class="col-sm-3 form-control-label">真实姓名</label>
										<div class="col-sm-9">
											<input type="text" name="name" value="${user.realName}" class="form-control">
										</div>
									</div>
									<div class="line"></div>
									<div class="form-group row">
										<label class="col-sm-3 form-control-label" >所属部门</label>
										<div class="col-sm-9">
											<select name="deptId" id="deptId" class="selectpicker" data-live-search="true">
												<c:forEach items="${deptList}" var="dept">
												<option ${loginUser.deptId==dept.id?'selected':''} value="${dept.id}">${dept.name}</option>
												</c:forEach>
											</select>
										</div>
									</div>
<%--									把部门的名称也传给后端，这个vaule是默认值，防止value为空--%>
									<input name="deptName" id="deptName" type="hidden" value="${loginUser.deptName}">
									<script>
										$("#deptId").change(function () {
											$("#deptName").val($(this).find("option:selected").html())
										})
									</script>
									<div class="line"></div>
									<div class="form-group row">
										<label class="col-sm-3 form-control-label">电话</label>
										<div class="col-sm-9">
											<input type="text"  value="${user.phone}" name="phone" class="form-control">
										</div>
									</div>
									<div class="line"></div>
									<div class="form-group row">
										<label class="col-sm-3 form-control-label">年龄</label>
										<div class="col-sm-9">
											<input type="text" name="age" value="${user.age}" placeholder="请输入年龄" class="form-control">
										</div>
									</div>
									<div class="line"></div>
									<div class="form-group row">
										<label class="col-sm-3 form-control-label">个人信息</label>
										<div class="col-sm-9">
											<textarea name="info" placeholder="请输入个人信息"
													  class="form-control" >${user.info}</textarea>
										</div>
									</div>
									<div class="form-group row">
										<label  class="col-sm-3 form-control-label">性别 </label>
										<div class="col-sm-9">

											<div class="i-checks">
												<input id="radioCustom1" type="radio" ${user.gender == 1 ?'checked':''} value="1" name="gender" class="radio-template">
												<label for="radioCustom1">男</label>
												<span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span>
												<input id="radioCustom2" type="radio" ${user.gender == 0 ?'checked':''} value="0" name="gender" class="radio-template">
												<label for="radioCustom2">女</label>
											</div>
										</div>


									</div>
									<div class="line"></div>
									<div class="form-group row">
										<label class="col-sm-3 form-control-label">注册时间</label>
										<div class="col-sm-9">
											<input type="text" disabled=""  value="${user.registerTime}" placeholder="2019-10-30 09:30:00" class="form-control">
										</div>
									</div>
									<div class="line"></div>
									<div class="form-group row">
										<label class="col-sm-3 form-control-label">登录时间</label>
										<div class="col-sm-9">
											<input type="text" disabled="" value="${user.loginTime}" placeholder="2019-10-30 19:30:00" class="form-control">
										</div>
									</div>
									<div class="line"></div>

									<div class="form-group row">
										<label class="col-sm-3 form-control-label" >是否私密 <br><small class="text-primary">默认为否，可以不设置</small></label>
										<div class="col-sm-9">
											<div class="i-checks">
												<input id="checkboxCustom1" type="checkbox" name="isSecret" ${user.isSecret == 0 ?'checked':''} value="0"  class="checkbox-template">
												<label for="checkboxCustom1">是否私密</label>
											</div>

										</div>


									</div>
									<div class="line"></div>
									<div class="text-center">
										<input type="submit" class="btn btn-primary" value="保存">
									</div>
								</form>
							</div>
						</div>
					</div>
				</section>

				<jsp:include page="/incloud/footer.jsp" />
			</div>
		</div>


	</body>
</html>
<script>
<%--	头像上传--%>
$("#picFile").change(function () {
	var forData = new FormData();
	forData.append("pic",document.getElementById("picFile").files[0])

	$.ajax({
		type:"post",
		url:"/internal/uploadPic",
		data:forData,
		processData: false,
		contentType:false,
		success:function (url) {
			$("#pic").attr("src",url);
			$("#loginUserPic").attr("src",url);

			$("#picFile").val("")

		}
	})
})
</script>
<script>
   $(function () {
       $("#pic").click(function () {

           $("#picFile").click();

       })
   })
</script>
